在vue2中，v-for的优先级高于v-if；

在vue3中，v-if的优先级高于v-for。

在vue中，永远不要把v-if和v-for同时用在同一个元素上，会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）；想要避免出现这种情况，可在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。

如果v-if依赖于v-for中的某一个数据，可以用computed计算属性和filter来实现。

 <div v-for="item in tempList" :key="item.id">
     <span>{{ item.id }}</span>
     <span>{{ item.name }}</span>
 </div>

 data() {
      return {
        list: [{
                id: 1,
                name:'张三',
                status: '1'
            },
            {
                id: 2,
                name:'李四',
                status: '0'
            }],
        flag: true
      }
    },
    computed: {
        tempList: function() {
            return this.list.filter((item, index)=> {
                return item.status === '1';
            })
        }

    }